<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { ISubCategory } from '@/service/api/type/category.type'
import { ISaleProperties, IOptions } from '../type'

const props = withDefaults(
  defineProps<{
    subCategoryData: ISubCategory
    loaded: boolean
  }>(),
  {}
)

const emit = defineEmits<{
  (e: 'checkedOptions', options: IOptions): void
}>()

const options: IOptions = reactive({
  brandId: null,
  attrs: null
})

const selectedBrandId = ref('')

const brands = computed(() => {
  const brands = props.subCategoryData.brands
  brands?.unshift({
    desc: '',
    id: '',
    logo: '',
    name: '全部',
    nameEn: 'all',
    picture: '',
    place: '',
    type: null
  })
  return brands
})

const checkBrandOptions = (brandId: string) => {
  selectedBrandId.value = brandId
  options.brandId = brandId
  emit('checkedOptions', options)
}

const saleProperties = computed(() => {
  const property = props.subCategoryData.saleProperties as ISaleProperties[]
  property?.forEach((item) => {
    item.properties.forEach((property) => {
      property.flag = false
    })
    item.properties.unshift({
      id: '',
      name: '全部',
      flag: true
    })
  })
  return property
})

const checkedOtherOptions = (salePropertyId: string, propertyId: string) => {
  saleProperties.value.forEach((saleProperty) => {
    if (saleProperty.id === salePropertyId) {
      saleProperty.properties.forEach((property) => {
        if (property.id === propertyId) {
          property.flag = true
          options.attrs = []
          options.attrs.push({
            propertyName: property.name,
            groupName: saleProperty.name
          })
          emit('checkedOptions', options)
        } else {
          property.flag = false
        }
      })
    }
  })
}
</script>

<template>
  <div class="sub-filter">
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a
          @click="checkBrandOptions(item.id)"
          href="javascript:;"
          v-for="item in brands"
          :key="item.id"
          :class="{ active: item.id === selectedBrandId }"
          >{{ item.name }}</a
        >
      </div>
    </div>
    <div class="item" v-for="item in saleProperties" :key="item.id">
      <div class="head">{{ item.name }}</div>
      <div class="body">
        <a
          @click="checkedOtherOptions(item.id, property.id)"
          href="javascript:;"
          v-for="property in item.properties"
          :key="property.id"
          :class="{ active: property.flag }"
          >{{ property.name }}</a
        >
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @themeColor;
        }
      }
    }
  }
}
</style>
